 <!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 基础表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
     <link rel="stylesheet" href="css/plugins/iCheck/custom.css"  media="all">


</head>
<body class="gray-bg">
<script type="text/html" id="demo">
#[[{{#  layui.each(d.list, function(index, item){ }}
                                <tr>
                                    <td width="1%">
                                    <input value="{{item.id}}" type="checkbox"  class="i-checks i" name="input[]">
                                    </td>
                                    <td>{{item.id}}</td>
                                    <td>{{item.title}}</td>
                                    <td>{{item.content}}</td>
                                    <td>
{{#  if(item.status === "0"){ }} 激活 {{#  } }}
{{#  if(item.status === "1"){ }} 冻结 {{#  } }}
                                    </td>
                                    <td width="10%">
                                    <p>
                                    <button value="{{item.id}}" class="btn btn-danger btn-xs delone" type="button">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;
                                    <span class="bold">删除</span>
                                    </button>
{{#  if(item.status === "1"){ }}
                                    <button value="{{item.id}}" status="{{item.status}}" class="btn btn-success btn-xs activate" type="button">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;
                                    <span class="bold">激活</span>
                                    </button>
{{#  } }}
{{#  if(item.status === "0"){ }}
                                    <button value="{{item.id}}" status="{{item.status}}"  class="btn btn-warning btn-xs activate" type="button">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;
                                    <span  class="bold">冻结</span>
                                    </button>
{{#  } }}
                                    </p>
                                    </td>
                                </tr> 
{{#  }); }}]]#
    </script>
                     <div class="ibox-content">
                       <form role="form" id="form" action="/blogs/1" class="form-inline" method="post">
                            <div class="form-group">
                                <label for="exampleInputEmail2" class="control-label">用户名:</label>
                                <input type="email" name="title" placeholder="title" id="exampleInputEmail2" class="form-control">
                                <input type="email" name="title" placeholder="title" value="like" hidden="" readonly="readonly">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword2" class="control-label">密码:</label>
                                <input type="password" name="id" placeholder="id" id="exampleInputPassword2" class="form-control">
                                <input type="email" name="id" placeholder="id" value="=" hidden="" readonly="readonly">
                            </div>
                        </form>
                   </div>
                   <div class="ibox-content">
                        <p >
                        <button id="add" class="btn btn-primary btn-xs" type="button"><i class="fa fa-check"></i>&nbsp;新增</button>
                        <button id="edit" class="btn btn-success btn-xs" type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">编辑</span>
                        </button>
                        <button id="see" class="btn btn-info btn-xs" type="button"><i class="fa fa-paste"></i> 查看</button>
                        <button id="delAll" class="btn btn-warning btn-xs" type="button"><i class="fa fa-warning"></i> <span class="bold">批量删除</span>
                        </button>
                        <button class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;百度地图</button>
                       <button id="resetting" style="float:right;" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;重置</button>
                       <span style="float:right;">&nbsp;&nbsp; </span> 
                       <button id="search" style="float:right;" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;查询</button>
                    </p>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr >
                                    <th>
                                    <input id="checkAll"  type="checkbox"  class="i-checks" ">
                                    </th>
                                    <th>#</th>
                                    <th>名称</th>
                                    <th>内容</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="view">
                            </tbody>
                        </table>
                        <div id="page"></div>
                    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>



    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>


    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <!-- Peity -->
    <script src="js/demo/peity-demo.js"></script>
    <script type="text/javascript" src="/js/laymi/jquery-form.js"></script>
    <script type="text/javascript" src="/js/layui/layui.js"></script>
    <script type="text/javascript">
    function list(curr){
    	$("#form").attr("action","/blogs/"+curr);
    	$("#form").ajaxSubmit({
			success:function(res){
				layui.use(['laypage', 'layer', 'laytpl'], function(){
					  var laypage = layui.laypage
					  ,layer = layui.layer
					  ,laytpl = layui.laytpl;
					  var getTpl = demo.innerHTML;
					     laytpl(getTpl).render(res, function(html){
					     //view.innerHTML = html;
					     $("#view").html(html);
					     //重新初始化
					     $('.i-checks').iCheck({
				                checkboxClass: 'icheckbox_square-green',
				                radioClass: 'iradio_square-green',
				            });
					     //全选操作
					     $('#checkAll').on('ifChecked', function(event){
					 		$('.i').iCheck('check');
					 	 });
					 	 $('#checkAll').on('ifUnchecked', function(event){
					 		$('.i').iCheck('uncheck');
					 	 });
					 	 //选中状态设置tr背景
					 	 $('.i').on('ifChecked', function(){
					 		$(this).closest('tr').addClass("success");
					 	 });
					 	 $('.i').on('ifUnchecked', function(){
					 		$(this).closest('tr').removeClass("success");
					 	 });
					     });
					  laypage({
						    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
					        pages: res.totalPage, //通过后台拿到的总页数
					        curr: curr || 1, //当前页
						    jump: function(obj, first){ //触发分页后的回调
						        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
						        	//绑定页码
						        	$("#search").data("pageNumber",obj.curr);
						        	list(obj.curr);
						        }
						      }
						  });
				});
			}
		});
    }
    $(function(){
    	//全选
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    	    //初始化table
    	    list(1);
    	    $("#search").data("pageNumber",1)
    	    //查询
    	    $("body").on("click","#search",function(){
        		list(1);
        	});
    	    //重置
    	    $("body").on("click","#resetting",function(){
        		$(".form-control").val("");
        		list(1);
        	});
      	    //删除一条
    	    $("body").on("click",".delone",function(){
    	    	var $button = $(this);
    	    	layer.confirm('确认要删除该记录吗？', {
    	    		  title: '删除确认',
    	    		  btn: ['确定','取消'] //按钮
    	    		}, function(){
    	    			$.ajax({
			                url:'/delOne',
			                type:'POST', //GET
			                data:{"id":$button.attr("value")},
			                timeout:5000,    //超时时间
			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
			                success:function(data,textStatus,jqXHR){
			                //刷新
			                list($("#search").data("pageNumber"));
			                layer.msg(data.msg, {icon: 1});
			                },
			                eorror:function(){
			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
			                }
			            });
    	    		}, function(){
    	    		});
        	});
    	  //激活/冻结
    	    $("body").on("click",".activate",function(){
    	    	var $button = $(this);
    	    	layer.confirm('确认要进行此操作吗？', {
    	    		  title: '操作确认',
    	    		  btn: ['确定','取消'] //按钮
    	    		}, function(){
    	    			$.ajax({
			                url:'/activate',
			                type:'POST', //GET
			                data:{"status":$button.attr("status"),"id":$button.attr("value")},
			                timeout:5000,    //超时时间
			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
			                success:function(data,textStatus,jqXHR){
			                	//刷新
				                list($("#search").data("pageNumber"));
			                	layer.msg(data.msg, {icon: 1});
			                },
			                eorror:function(){
			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
			                }
			            });
    	    		}, function(){
    	    		});
        	});
    	  //新增
    	    $("body").on("click","#add",function(){
    	    	var $button = $(this);
    	    	layer.open({
    	    		  type: 2,
    	    		  skin: 'layui-layer-demo', //样式类名
    	    		  anim: 2,
    	    		  area: ['70%', '90%'],
    	    		  shadeClose: true, //开启遮罩关闭
    	    		  content: '/toadd'
    	    		});
        	});
    	  //编辑
    	    $("body").on("click","#edit",function(){
    	    	var $button = $(this);
    	    		//var url = $(this).attr('data-url');
    	    		var str="";
    	    		var ids="";
    	    		$("input[class='i-checks i']:checkbox").each(function(){
    	    		if(true == $(this).is(':checked')){
    	    		str+=$(this).val()+",";
    	    		}
    	    		});
    	    		if(str.substr(str.length-1)== ','){
    	    		ids = str.substr(0,str.length-1);
    	    		}
    	    		if(ids==""){
    	    			layer.msg('请选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		if(ids.indexOf(",") >= 0){
    	    			layer.msg('只能选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    	   layer.open({
    	    		  type: 2,
    	    		  skin: 'layui-layer-demo', //样式类名
    	    		  anim: 2,
    	    		  area: ['70%', '90%'],
    	    		  shadeClose: true, //开启遮罩关闭
    	    		  content: '/toedit/'+ids
    	    		});
        	});
    	    //查看
    	    $("body").on("click","#see",function(){
    	    	var $button = $(this);
    	    		//var url = $(this).attr('data-url');
    	    		var str="";
    	    		var ids="";
    	    		$("input[class='i-checks i']:checkbox").each(function(){
    	    		if(true == $(this).is(':checked')){
    	    		str+=$(this).val()+",";
    	    		}
    	    		});
    	    		if(str.substr(str.length-1)== ','){
    	    		ids = str.substr(0,str.length-1);
    	    		}
    	    		if(ids==""){
    	    			layer.msg('请选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		if(ids.indexOf(",") >= 0){
    	    			layer.msg('只能选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    	   layer.open({
    	    		  type: 2,
    	    		  skin: 'layui-layer-demo', //样式类名
    	    		  anim: 2,
    	    		  area: ['70%', '90%'],
    	    		  shadeClose: true, //开启遮罩关闭
    	    		  content: '/tosee/'+ids
    	    		});
        	});
    	    //批量删除
    	    $("body").on("click","#delAll",function(){
    	    	var $button = $(this);
    	    		//var url = $(this).attr('data-url');
    	    		var str="";
    	    		var ids="";
    	    		$("input[class='i-checks i']:checkbox").each(function(){
    	    		if(true == $(this).is(':checked')){
    	    		str+=$(this).val()+",";
    	    		}
    	    		});
    	    		if(str.substr(str.length-1)== ','){
    	    		ids = str.substr(0,str.length-1);
    	    		}
    	    		if(ids==""){
    	    			layer.msg('请选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		layer.confirm('确认要删除这些记录吗？', {
      	    		  title: '删除确认',
      	    		  btn: ['确定','取消'] //按钮
      	    		}, function(){
      	    			$.ajax({
  			                url:'/delAll',
  			                type:'POST', //GET
  			                data:{"ids":ids},
  			                timeout:5000,    //超时时间
  			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
  			                success:function(data,textStatus,jqXHR){
  			                //刷新
  				            list($("#search").data("pageNumber"));
  			                layer.msg(data.msg, {icon: 1});
  			                },
  			                eorror:function(){
  			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
  			                }
  			            });
      	    		}, function(){
      	    		});
        	});
    	  //绑定tr点击事件
		 	 $("#view").on("click","tr",function(){
		 		$(this).find(".i").iCheck('toggle');
   	     });
    });
    </script>

</body>

</html>
